
<%
	/**
	商家导购信息
	 **/
%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<link rel="stylesheet"
	href="/safeai/css/safeai/navigationInfo/simple/safeai-newsreel-dark.css"
	media="screen" />
<!-- Start Tab Area. Use the container for positioning and to increase the tab content width !-->
<div id="navigation-container" >

	<!-- Start Tabs !-->

	<div class="tab-container">

		<!-- Use c + the tab number or any other identifier you'd like when creating a new tab, just keep them in order.  You can have an unlimited number of tabs !-->
		<logic:present name="ArticleRange">
			<logic:iterate id="article" name="ArticleRange" property="records"
				indexId="number">

				<div id="c1">
					<span title="${article.title}" class="span-title"
						onclick="infoSpanChange('tab-content-c<bean:write name="number"/>');"><a href="#">${article.title}</a></span>
					<!-- This is your actual tab and the content is below it !-->
					<div class="tab-content" style="margin-top:50px;"
						id="tab-content-c<bean:write name="number"/>"
						onclick="infoSpanChange('tab-content-c<bean:write name="number"/>');">
						<!-- tab-container > div > div in the CSS !-->
						<h3>
							${article.title}
						</h3>
						<p>
							${article.content}
						</p>
					</div>
				</div>
			</logic:iterate>
		</logic:present>
<form action="articleManage.do" id="filterForm" method="post">
				<input type="hidden" name="method" value="navigationInfo">
				<%@ include file="/pages/safeai/view/common/tailPage.jsp"%>&nbsp;&nbsp;&nbsp;&nbsp;
</form>

	</div>
	<!-- Tab Container !-->


</div>
<script type="text/javascript">
<!--

	var iZ_index= 2;
	//改变现实的优先级
	function infoSpanChange(keepDivId){
		var strDivId = keepDivId;
		if(strDivId){
			var objDiv = document.getElementById(strDivId);
			if(objDiv){
				objDiv.style.zIndex = iZ_index;
				iZ_index++;
				
				var listTabContent = getElementsByClassName('tab-content');
				for(var i=0,j=listTabContent.length;i<j;i++){
					if(listTabContent[i].id == strDivId){
						listTabContent[i].style.background = "FFFAEE";
						listTabContent[i].style.backgroundColor = "FFFAEE";
					}else{
						listTabContent[i].style.background = "E7E7E7";
						listTabContent[i].style.backgroundColor = "E7E7E7";
					}
				}
			}
		}
	}
	
	//调整文章信息的显示高度
	function resizePageDynamic(){
		var minHeight = 750;
		var listTabContent = getElementsByClassName('tab-content');
		for(var i=0,j=listTabContent.length;i<j;i++){
			if(listTabContent[i].offsetHeight > minHeight){
				minHeight = listTabContent[i].offsetHeight+100 ;
			}
		}
		document.getElementById('navigation-container').style.height=minHeight+'px';
	}
	//根据样式来查找相关的元素
	function getElementsByClassName(className) {
	   var all = document.all ? document.all : document.getElementsByTagName('*');
	   var elements = new Array();
	   for (var e = 0; e < all.length; e++) {
	     if (all[e].className == className) {
	        elements.push(all[e]);
	      }
	    }
	   return elements;
	}
	infoSpanChange('tab-content-c1');
	resizePageDynamic();

//-->
</script>

<div class="clear"></div>
<!-- Container !-->

